<template>
    <!--地图挂载dom-->
    <div id="map">
        <div class="MapTool">
            <el-select v-model="type" placeholder="请选择" @change="changeType">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
    //引入依赖

    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import {RegularShape, Style, Fill, Stroke} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import {Point} from 'ol/geom';
    import TileLayer from 'ol/layer/Tile'

    export default {
        name: 'VectorRegularShapeLayer2',
        data() {
            return {
                options: [{
                    value: 'x',
                    label: 'x'
                }, {
                    value: 'cross',
                    label: 'cross'
                }, {
                    value: 'star',
                    label: 'star'
                }, {
                    value: 'triangle',
                    label: 'triangle'
                }, {
                    value: 'square',
                    label: 'square'
                }, {
                    value: 'rectangle',
                    label: 'rectangle'
                }, {
                    value: 'stacked',
                    label: 'stacked'
                }],
                value: '',
                type: "x",
            }
        },
        mounted() {
            //描边样式
            const stroke = new Stroke({color: 'black', width: 2});
            //填充样式
            const fill = new Fill({color: 'red'});
            //样式对象
            this.styles = {
                'square': new Style({
                    image: new RegularShape({
                        fill: fill,
                        stroke: stroke,
                        points: 4,
                        radius: 10,//正多边形的半径
                        angle: Math.PI / 4,//夹角
                    }),
                }),
                'rectangle': new Style({
                    image: new RegularShape({
                        fill: fill,
                        stroke: stroke,
                        radius: 10 / Math.SQRT2,//半径就是10/2的平方根
                        radius2: 10,//星形半径
                        points: 4,
                        angle: 0,
                        scale: [1, 0.5],//通过设置x,y的缩放比例实现矩形
                    }),
                }),
                'triangle': new Style({
                    image: new RegularShape({
                        fill: fill,
                        stroke: stroke,
                        points: 3,//正三角形三个点
                        radius: 10,
                        //rotation: Math.PI / 4,//图形旋转
                        angle: 0,
                    }),
                }),
                'star': new Style({
                    image: new RegularShape({
                        fill: fill,
                        stroke: stroke,
                        points: 6,
                        radius: 10,//正多边形的半径
                        radius2: 5,//星形的半径4
                        angle: 0,
                    }),
                }),
                'cross': new Style({
                    image: new RegularShape({
                        fill: fill,
                        stroke: stroke,
                        points: 4,
                        radius: 10,
                        radius2: 0,
                        angle: 0,//没有夹角
                    }),
                }),
                'x': new Style({
                    image: new RegularShape({
                        fill: fill,//默认填充黑色
                        stroke: stroke,//默认秒表黑色
                        points: 4,//4个点
                        radius: 10,//多边形的半径是10
                        radius2: 0,//星形的半径是0
                        angle: Math.PI / 4,//图形之间的夹角45度
                    }),
                }),
                'stacked': [
                    new Style({
                        image: new RegularShape({
                            fill: fill,
                            stroke: stroke,
                            points: 4,
                            radius: 5,
                            angle: Math.PI / 4,
                            displacement: [0, 10],
                        }),
                    }),
                    new Style({
                        image: new RegularShape({
                            fill: fill,
                            stroke: stroke,
                            points: 4,
                            radius: 10,
                            angle: Math.PI / 4,
                        }),
                    }),
                ],
            };


            this.source = new VectorSource();

            const vectorLayer = new VectorLayer({
                source: this.source,
            });
            this.map = new Map({
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }), vectorLayer],
                target: 'map',
                view: new View({
                    center: [0, 0],
                    zoom: 2,
                }),
            });

            //默认绘制“x”
            this.changeType(this.type);

        },
        methods: {
            changeType(type) {
                this.source.clear()
                const count = 50;
                const features = new Array(count);
                const e = 4500000;
                //使用平面坐标生成50个点要素的坐标
                for (let i = 0; i < count; ++i) {
                    const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
                    features[i] = new Feature(new Point(coordinates));
                    //根据绘制的类型设置点要素的样式
                    features[i].setStyle(
                        this.styles[type]
                    );
                }
                //将要素添加到数据源中
                this.source.addFeatures(features);
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>
